<template>
    <div class="playBox">
        <div class="song-bg" :style="{'background-image':`url(${musicNameUrl.picUrl})`}"></div>
        <div class="allBox">
            <div class="height">
                <div class="logo">
                    <span class="f-logo">
                        <svglogo class="svglogo">
                        </svglogo>
                    </span>
                </div>
                <div class="song-wrap">
                    <div class="song-disc">
                        <div class="song-clickarea" @click="play">

                        </div>
                        <div class="song-turn">
                            <div class="song-rollwrap">
                                <div class="song-img">
                                    <img :src="musicNameUrl.picUrl">
                                </div>
                            </div>
                        </div>
                            <audio :src="musicInformation"  autoplay controls ref="audio"></audio>
                            <span class="song-playbtn" v-if="playBtn" ></span>
                    </div>
                </div>
                <div class="song-info" >
                    <h2 class="song-h2">
                        <span class="song-name">{{musicNameUrl.name}}</span>
                        <span>-</span>
                        <span class="song-author">-{{author}}</span>
                    </h2>
                    <div class="lyric">
                        <p class="row" v-for="(lyr,index) in musicLyrics" :key="index">{{lyr}}</p>
                    </div>
                    <div class="moreLyric">
                        查看完整歌词 >
                    </div>
                    <div class="arrowUpUp" >
                        <i class="arr"></i>
                    </div>
                </div>
            </div>
            <div class="musicConment">
                <h4 class="cmt-title">精彩评论</h4>
                <comment v-for=" (com,index) in comments" :key="index" v-bind="com"></comment>
            </div>
        </div>
        <div class="footer">
            <span class="open">打开</span>
            <span class="down">下载</span>
        </div>
    </div>
</template>
<script>

import axios from 'axios'
import api from '@/api/index.js'
import svglogo from '@/svg/playSong-logo.svg'
import comment from '@/components/comment-T'
export default {
    components:{
        svglogo,
        comment,
    },
    data(){
        return{
            musicInformation:[],
            comments:[],
            musicLyrics:[],
            playBtn:false,
            musicNameUrl:[],
            author:String 
        }
    },
    methods:{
        hideHeader_Nav(){
            this.$store.commit("setshowHeader",{
            showHeader:false
            });
            this.$store.commit("setshowNav",{
            showNav:false
            });
        },
        play(){
            var audio=document.querySelector("audio");
            var anima=document.querySelector(".song-rollwrap");
            console.log(anima)
            // 如果暂停
            if(audio.paused){
                audio.play();
                 anima.style.animationPlayState= "running";
            }
            else{
                audio.pause();
                anima.style.animationPlayState= "paused";
            }
            this.playBtn=!this.playBtn;
        },
        getMusic(){
            console.log(api.playMusic)
            axios.get(api.playMusic,{
                params:{
                    id:this.$route.query.id
                }
            })
            .then((res)=>{
                console.log(res)
                this.musicInformation=res.data.data[0].url;
                console.log(this)
                this.$nextTick(function(){
                    this.$refs.audio.addEventListener("timeupdate",(e)=>{
                    console.log(e)
                    })
                })
                
                console.log(this.musicInformation)

            })
        },
        getLyric(){
            axios.get(api.musicLyric,{
                params:{
                    id:this.$route.query.id
                }
            })
            .then((res)=>{
                console.log(res)
                this.musicLyrics=(res.data.lrc.lyric).split("\n");
                // console.log(this.musicLyrics)
            })
        },
        getMusicComment(){
            axios.get(api.playComment,{
                params:{
                    id:this.$route.query.id
                }
            })
            .then((res)=>{
                console.log(res)
                this.comments=res.data.hotComments;
                console.log(this.comments)
            })
        },
        getMusicPic(){
            axios.get(api.musicPic,{
                params:{
                    ids:this.$route.query.id
                }
            })
            .then((res)=>{
                console.log(res)
                this.musicNameUrl=res.data.songs[0].al;
                this.author=res.data.songs[0].ar[0].name;
                console.log(res.data)
            })
        }
    },
    mounted(){
        this.hideHeader_Nav();
        this.getMusic();
        this.getLyric();
        this.getMusicComment();
        this.getMusicPic();
    }
}

</script>
<style lang="scss">
.playBox{
    position: relative;
    height: 100%;
    .song-bg{
        filter:blur(10px);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-transform-origin: center top;
        transform-origin: center top;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
        // z-index: -1;
        -webkit-transition: opacity .3s linear;
        transition: opacity .3s linear;
        background-image: url(https://p3.music.126.net/d7iYt9Zk5t-jTHZsz1BLCw==/109951163655144083.jpg);
        opacity: 1;
        background-color: rgba(0,0,0,.5);
        
    }
    .song-bg:after{
        content:"";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.5);
    }
    .allBox{
            height: 600px;
            overflow:scroll;
            .height{
                height: 620px;
                .f-logo{
                    position: absolute;
                    top: 12px;
                    left: 10px;
                    display: block;
                    height: 17px;
                    line-height: 0;
                    .svglogo{
                        width: 92px;
                        height: 17px;
                        display: inline-block;
                        vertical-align: middle;
                        background-position: 0 0;
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }
                .song-wrap{
                    padding-top: 70px;
                    .song-disc{
                        width: 296px;
                        height: 296px;
                        margin: 0 auto;
                        position: relative;
                        .song-clickarea{
                            position: absolute;
                            width: 100%;
                            top: 0;
                            left: 0;
                            height: 100%;
                            bottom: 52px;
                            z-index: 10;
                        }
                        .song-turn{
                            width: 100%;
                            height: 100%;
                            position: relative;
                            .song-rollwrap{
                                    width: 184px;
                                    height: 184px;
                                    margin: -92px 0 0 -92px;
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    // z-index: 1;
                                    animation: routate 15s infinite linear;
                                    transition: all 10s;
                                .song-img{
                                width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    overflow: hidden;
                                    background: url(//s3.music.126.net/m/s/img/disc_default.png?7c9b3ad…) no-repeat;
                                    background-size: contain;
                                    img{
                                        width: 100%;
                                        vertical-align: middle;
                                    }
                                } 
                            }
                        }
                        .song-turn:after{
                            background-image: url(https://s3.music.126.net/m/s/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48);
                            content: " ";
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            bottom: 0;
                            // z-index: 2;
                            background: url(https://s3.music.126.net/m/s/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f) no-repeat;
                            background-size: contain;
                        }
                        .song-playbtn{
                                width: 56px;
                                height: 56px;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                cursor: pointer;
                                transform: translate(-50%,-50%);
                                z-index: 1;
                                background: url() 0 0 no-repeat;
                                background-size: contain;
                        }
                    }
                    .song-disc:after{
                        content:"";
                        width: 96px;
                        height: 137px;
                        top: -70px;
                        left: 133px;
                        position: absolute;
                        background-size: contain;
                        background-image: url(https://s3.music.126.net/m/s/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862);
                    }
                }
                .song-info{
                    position: relative;
                    padding: 0 35px;
                    margin-top: 25px;
                    .song-h2{
                        text-align: center;
                        font-size: 18px;
                        color: white;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .lyric{
                        padding-top: 14px;  
                        color: white;
                        text-align: center;
                        -webkit-line-clamp:2;
                        height: 50px;
                        overflow: hidden;
                        .row{
                            padding-bottom: 8px;
                        }
                    }
                    .moreLyric{
                        position: absolute;
                        top: 200%;
                        left: 50%;
                        transform: translateX(-50%);
                        color: hsla(0,0%,100%,.6);   
                    }
                    .arrowUpUp{
                        position: absolute;
                        top: 240%;
                        left: 50%;
                        transform: translateX(-50%);
                        .arr{
                            display: block;
                            width: 17px;
                            height: 12px;
                            background-repeat: no-repeat;
                            background-size: 17px auto;
                            background-image: url();
                            background-position: 0 0;
                            animation: arrowupup 1.2s linear infinite;
                            animation-timing-function: steps(1,end);
                        }
                    }
                }
            }
            .musicConment{
                position: relative;
                .cmt-title{
                    line-height: 25px;
                    color: #fff;
                    font-size: 16px;
                    margin: 0;
                    font-weight: 400;
                    background: rgba(0,0,0,.05);
                }
                .item .content{
                    .header{
                        .user .name .username{
                            color: hsla(0,0%,100%,.7);
                        }
                        .like{
                            color: #999;
                        }
                    }
                    .answer{
                        color: #fff;
                    }
                }
            }  
        }
    .footer{
        position: fixed;
        bottom: 10px;
        display: flex;
        width: 100%;
        z-index: 1;
        justify-content: center;
        padding: 0 10px;
        margin: 0 auto;
        box-sizing: border-box;
        span{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 90%;
            text-align: center;
            border: 1px solid #d33a31;
            border-radius: 40px;
            font-size: 18px;
            margin-left: 10px;
            padding: 0 6px;
        }
        .open{
            color: #d33a31;
        }
        .down{
            background-color: #d33a31;
           color: white;
        }
    }
}

audio{
    position:fixed;
    z-index:2;
    top: 195px;
    left: 165px;
    display: none;
}
@keyframes routate{
    form{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes arrowupup {
    0% {
    background-position: 0 0;
    }
    15% {
        background-position: 0 -12px;
    }
    30% {
        background-position: 0 -24px;
    }
    45% {
        background-position: 0 -36px;
    }
    60% {
        background-position: 0 -48px;
    }
    75% {
        background-position: 0 -60px;
    }
    90% {
        background-position: 0 -72px;
    }
    100% {
        background-position: 0 -84px;
    }
}

</style>
